<template>
  <dys-modal
    :open="open"
    :title="t('用户管理')"
    @cancel="emit('cancel')"
    @ok="handleSubmit"
    :loading="loading"
    :width="400"
  >
    <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
      <a-form-item :label="t('头像')" v-bind="validateInfos.avatar">
        <upload-file
          v-model:value="modelRef.avatar"
          type="preview"
          accept="image/*"
        ></upload-file>
      </a-form-item>
      <a-form-item :label="t('昵称')" v-bind="validateInfos.nickname">
        <a-input
          v-model:value="modelRef.nickname"
          :placeholder="t('请输入昵称')"
          allow-clear
        ></a-input>
      </a-form-item>
      <a-form-item :label="t('用户名')" v-bind="validateInfos.username">
        <a-input
          v-model:value="modelRef.username"
          :placeholder="t('请输入用户名')"
          allow-clear
        ></a-input>
      </a-form-item>
      <a-form-item :label="t('密码')" v-bind="validateInfos.password">
        <a-input-password
          v-model:value="modelRef.password"
          :placeholder="t('请输入密码')"
          allow-clear
        ></a-input-password>
      </a-form-item>
      <a-form-item :label="t('邮箱')" v-bind="validateInfos.email">
        <a-input
          v-model:value="modelRef.email"
          placeholder="请输入邮箱"
          allow-clear
        ></a-input>
      </a-form-item>
      <a-form-item :label="t('关联人员')" v-bind="validateInfos.personId">
        <popup-person
          v-model:value="modelRef.personId"
          allow-clear
        ></popup-person>
      </a-form-item>
      <a-form-item :label="t('角色')" v-bind="validateInfos.roleIdList">
        <select-role v-model:value="modelRef.roleIdList" multiple></select-role>
      </a-form-item>
    </a-form>
  </dys-modal>
</template>
<script lang="ts" setup>
import { pick } from "lodash";
import { useI18n } from "vue-i18n";
import { reactive, ref, watch, computed } from "vue";
import { Form, message } from "ant-design-vue";
import { add, update } from "@/api/system/user";
import type { FormRule } from "@/typing";
import type { UserParams, QueryResult } from "@/api/system/user/typing";
import SelectRole from "@/components/select-role/index.vue";
import UploadFile from "@/components/upload-file/index.vue";
import PopupPerson from "@/components/popup-person/index.vue";
interface Props {
  /**弹窗 */
  open: boolean;
  /**行数据 */
  model: QueryResult;
}
const props = defineProps<Props>();
const emit = defineEmits(["cancel", "ok"]);
const { t } = useI18n();
const initValue = (): UserParams => ({
  avatar: null,
  userId: null,
  username: null,
  nickname: null,
  email: null,
  password: null,
  personId: null,
  roleIdList: [],
});
const modelRef = reactive(initValue());
const baseRule = reactive<FormRule<UserParams>>({
  username: [{ required: true, message: () => t("请输入用户名") }],
  nickname: [{ required: true, message: () => t("请输入昵称") }],
  email: [{ required: true, type: "email", message: () => t("邮箱格式错误") }],
  roleIdList: [{ required: true, message: () => t("请选择默认角色") }],
});
const modelRule = computed<FormRule<UserParams>>(() => {
  if (props.model?.userId) {
    return baseRule;
  } else {
    return {
      ...baseRule,
      password: [{ required: true, message: () => t("请输入密码") }],
    };
  }
});
const { validate, validateInfos, resetFields } = Form.useForm(
  modelRef,
  modelRule
);
watch([() => props.model, () => props.open], ([model]) => {
  resetFields(pick(model, Object.keys(modelRef)) || initValue());
});
const loading = ref(false);
/**提交 */
const handleSubmit = async () => {
  try {
    await validate();
  } catch {
    return message.warning(t("校验失败"));
  }
  loading.value = true;
  const { success } = await (props.model?.userId ? update : add)(modelRef);
  loading.value = false;
  if (success) {
    message.success(props.model?.userId ? t("修改成功") : t("新增成功"));
    emit("ok");
    emit("cancel");
  }
};
</script>
